<template>
  <div>
    <el-autocomplete
      class="inline-input wid220"
      v-model="name"
      clearable
      @clear="Clear()"
      ref="searchSelect"
      :fetch-suggestions="
        (queryString, cb) => {
          querySearchAsync(queryString, cb);
        }
      "
      :placeholder="placeholder"
      :trigger-on-focus="false"
      @select="
        item => {
          handleSelect(item);
        }
      "
      ><template slot-scope="{ item }">
        <div class="main_name">
          <span>
            {{ item.goods.name }}【{{
              item.spu_name ? item.spu_name.title : ""
            }}】
          </span>
          <span class="code">{{ item.goods_spu_code }}</span>
        </div>
      </template></el-autocomplete
    >
  </div>
</template>

<script>
import { goods_getAllGoodsSpu, goods_getGoodsSpu } from "@/api/currency";
import { turnoverOrder_searchItems } from "@/api/warehouse/warehouseTurnOrder.js";
import { get_full_getUndercarriage } from "@/api/marketing/marketing.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";

export default {
  props: {
    url: {
      // 空  =>goods_getAllGoodsSpu
      // 1  =>goods_getGoodsSpu  添加订单
      // 2 => turnoverOrder_searchItems  周转商品  物品借出搜索
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "商品名称/助记码/编码"
    }
  },
  data() {
    return {
      name: ""
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, { name: queryString.trim() })
            ) + apiUrl().appsecret
          )
        },
        apiUrl().name,
        { name: queryString.trim() }
      );
      let func = null;
      switch (this.url) {
        case "1":
          func = goods_getGoodsSpu;
          break;

        case "2":
          func = turnoverOrder_searchItems;
          break;
        default:
          func = goods_getAllGoodsSpu;
          break;
      }
      func(data).then(res => {
        if (res.errcode == 0) {
          let results = [];
          if (this.url == 2) {
            res.data.list.map(e => {
              e.spu_name = "";
              e.spu_name = e.goods_spu.spu_name;
              e.goods_spu_code = e.goods_spu.goods_spu_code;
              e.name = e.goods.name + "【" + e.spu_name.title + "】";
            });
            results = res.data.list;
          } else {
            res.data.goods.map(e => {
              let title = e.spu_name ? e.spu_name.title : "";
              e.name = e.goods.name + "【" + title + "】";
            });
            results = res.data.goods;
          }
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }
          cb(results);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    handleSelect(item) {
      this.name = item.name;
      this.$emit("sendValue", item);
    },
    Clear() {
      this.$emit("clear");
    },
    focus() {
      this.$refs["searchSelect"].focus();
    }
  },
  mounted() {
    console.log(this.name)
  }
};
</script>

<style lang="scss" scoped>
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: initial;
  padding: 0 0;
  height: 40px;
  .code {
    color: #999;
  }
}
</style>
